<%@page import="java.util.Date"%>
<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>君乐宝酸奶管理系统-新增销售订单</title>
<link rel="stylesheet" href="${ctx}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx}/css/my.css">
<link href="${ctx}/My97DatePicker/skin/WdatePicker.css" rel="stylesheet">
<script type="text/javascript"
	src="${ctx}/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
	<!-- 导航条 -->
	<jsp:include page="/mng/nav.jsp" />
	<!-- /导航条 -->

	<!-- 主容器 -->
	<div class="container" style="margin-top: 76px">
		<div class="row">
			<!-- 功能菜单 -->
			<jsp:include page="/mng/menu.jsp" />
			<!-- /功能菜单 -->

			<!-- 主界面 -->
			<div id="main" class="main col-md-9">
				<!-- 路径导航 -->
				<ol class="breadcrumb" style="border-radius: 0; background: #fff;">
					<li><a href="${ctx}/mng/main.jsp">首页</a></li>
					<li><a href="#">销售管理</a></li>
					<li class="active">新增销售订单</li>
				</ol>
				<!-- /路径导航 -->

				<!-- 表单 --> 
			
				<div class="row">
					<form action="${ctx}/mng/sale/add.jhtml" method="post"
						class="form-horizontal" role="from" id="from">
						<div class="form-group">
							<label class="col-md-2 control-label">客户</label>
							<div class="col-md-3">
								<select class="form-control" name="cust_id" id="customerId">
									<c:forEach items="${custList}" var="cust">
										<option value="${cust.id}">${cust.lname}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-2 control-label">单据编号</label>
							<div class="col-md-3">
								<input type="text" class="form-control" id="sn" name="sn"
									value="${sn}" placeholder="">
							</div>
							<label class="col-md-2 control-label">单据日期</label>
							<div class="col-md-3">
								<input type="text" class="form-control" id="sale_date"
									name="sale_date" placeholder="点击选择日期" onclick="WdatePicker()"
									value='<fmt:formatDate value="<%= new Date() %>" pattern="yyyy-MM-dd"/>'
									style="background: url('${ctx}/img/datepicker_icon.png') no-repeat right 0;">
							</div>
						</div>
						<div class="form-group">
							<table class="table table-bordered" id="table_items"
								style="width: 90%; margin-left: auto; margin-right: auto;"
								id="stock">
								<thead>
									<tr>
										<th>操作</th>
							<th>商品</th>
							<th>单位</th>
							<th>库存数量</th>
							<th>数量</th>
							<th>售货单价</th>
							<th>售货金额</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td width="70px;"><span
											class="addRow glyphicon glyphicon-plus" title="新增行"></span> <span
											class="removeRow glyphicon glyphicon-trash" title="删除行"></span>
										</td>
										<td width="150px;">
											<div class="pr">
												<input type="text" class="textbox" name="name" value="">
												<span class="myicon-ellipsis open"></span> <input
													type="hidden" name="p_id" value="" />
											</div>
										</td>
										<td><input type="text" name="unit" id="unit" class="textbox1"></td>
										<td><input type="number" name="num" id="oldnum" class="textbox1" readonly="readonly"></td>
										<td><input type="number" name="p_num" id="num" class="textbox1"></td>
										<td><input type="text" name="sale_price" class="textbox1"
											style="background: #ffffff"></td>
										<td><input type="text" name="total_price"
											class="textbox1" readonly="readonly"
											style="background: #ffffff"></td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<td></td>
										<td><b>合计:</b></td>
										<td></td>
										<td></td>
										<td><b>0</b></td>
										<td></td>
										<td><b id="total">0.00</b></td>
									</tr>
								</tfoot>
							</table>
						</div>
						<div class="form-group">
							<label class="col-md-2 control-label">备&nbsp;&nbsp;&nbsp;&nbsp;注</label>
							<div class="col-md-9">
								<input type="text" class="form-control" id="remark"
									name="remark" placeholder="">
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-2 control-label">付款方式</label>
							<div class="col-md-3">
								<select name="pay_type" id="pay_type"
									class="form-control input-sm">
									<option value="0">全款</option>
									<option value="1">欠款</option>
								</select>
							</div>
							<label class="col-md-2 control-label"
								style="margin-bottom: 15px; width: 75px;">制单人</label>
							<div class="col-md-3">
								<input type="text" class="form-control"
									value="${sessionScope.curr_mgr.lname}" disabled="disabled">
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-2 pull-right" style="margin-right: 20px">
								<input type="button"  onclick="tijiao()"  class="form-control btn-primary" value="提交"></input>
							</div>
							<div class="col-md-2 pull-right">
								<button type="reset" class="form-control btn-warning">重置</button>
							</div>
						</div>
					</form>
				</div>
				<!-- /表单 -->

			</div>
			<!-- /主界面 -->
		</div>
	</div>

	<!-- 模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">选择商品</h4>
				</div>
				<div class="modal-body">
					<div class="container-fluid" style="min-height: 550px;">
						<select class="form-control" style="width: 150px;"
							id="category_id">
							<c:forEach items="${cateList}" var="cate">
								<option value="${cate.id}">${cate.name}</option>
							</c:forEach>
						</select>
						<table class="table table-striped table-bordered table-hover"
							id="data_table" style="margin-top: 20px;">
							<thead>
								<tr>
									<th>&nbsp;</th>
									<th>商品名称</th>
									<th>商品规格</th>
									<th>商品单价</th>
									<th>商品单位</th>
									<th>库存数量</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" id="ok" class="btn btn-primary">选中</button>
				</div>
			</div>
		</div>
	</div>
	<!-- /模态框 -->

	<script src="${ctx}/js/jquery-1.11.1.min.js"></script>
	<script src="${ctx}/bootstrap3/js/bootstrap.min.js"></script>
	<script src="${ctx}/js/my.js"></script>
	<script>
		var tr_row = $("#table_items>tbody>tr:first");
		//增加行
		$(".addRow").click(function() {
			var row = tr_row.clone(true);

			$("input[name='name']", row).val("");
			$("input[name='p_id']", row).val("");
			$("input[name='unit']", row).val("");
			$("input[name='num']", row).val("");
			$("input[name='p_num']", row).val("");
			$("input[name='sale_price']", row).val("");
			$("input[name='total_price']", row).val("");
			$("#table_items>tbody").append(row);
		});

		$(".removeRow").click(function() {//删除当前行
			if ($("#table_items>tbody>tr").size() > 1) {
				$(this).parent().parent().remove();
			}
		});

		function loadAjaxData() {//加载商品列表
			var param = {
				id : $("#category_id").val()
			};
			$
					.post(
							"${ctx}/mng/prod/ajaxList.jhtml",
							param,
							function(json) {
								var str = "";
								$(json)
										.each(
												function(idx, item) {//拼接表格内容的过程
													str += "<tr><td><input type='radio' name='prod_id' value='" + item.id + "' class='item_id'></td><td>"
															+ item.name
															+ "</td><td>"
															+ item.model
															+ "</td><td>"
															+ item.sale_price
															+ "</td><td>"
															+ item.unit
															+ "</td><td>"
															+ item.num
															+ "</td></tr>";
												});

								$("#data_table>tbody").html(str);
							}, "json");
		}
		//打开模态框前需要进行的操作
		$("#myModal").on('show.bs.modal', function() {
			loadAjaxData();
		});

		//显示模态框
		var curr_row = null;//当前点击的行
		$(".open").click(function() {
			curr_row = $(this).parent().parent().parent();
			$("#myModal").modal("show");
		});
		//改变分类时，获取新的商品列表
		$("#category_id").change(function() {
			loadAjaxData();
		});

		function totalAll() { //计算总价
			var t = 0;
			$("input[name='total_price']", "#table_items").each(
					function(i, ele) {
						//TODO 还需要转换成数字进行计算。
						t += parseFloat($(this).val());
					});
			$("#total").html(t);
		}

		//在对话框中点击“选中”时
		$("#ok")
				.click(
						function() {
							$("#myModal").modal("hide");

							$(".item_id")
									.each(
											function(i, ele) {
												if ($(ele).prop('checked')) { //判断当前radio如果是选中的，就加载商品信息
													var param = {
														id : $(ele).val()
													};
													//根据商品的id去加载数据
													$
															.post(
																	"${ctx}/mng/prod/ajaxDetail.jhtml",
																	param,
																	function(
																			json) {
																		//alert(curr_row);
																		var row = curr_row;//$("#table_items>tbody>tr").eq(curr_row);
																		//给表格当前行设置值
																		$(
																				"input[name='name']",
																				row)
																				.val(
																						json.name);
																		$(
																				"input[name='p_id']",
																				row)
																				.val(
																						json.id);
																		$(
																				"input[name='unit']",
																				row)
																				.val(
																						json.unit);
																		$(
																				"input[name='num']",
																				row)
																				.val(
																						json.num);
																		var num = $(
																				"input[name='p_num']",
																				row);
																		num
																				.val(1); //默认数量为1

																		var sale_price = $(
																				"input[name='sale_price']",
																				row);
																		sale_price
																				.val(json.sale_price);

																		sale_price
																				.change(function() {
																					total
																							.val(sale_price
																									.val()
																									* num
																											.val());
																					totalAll();
																				});

																		var total = $(
																				"input[name='total_price']",
																				row);
																		total
																				.val(sale_price
																						.val()
																						* num
																								.val()); //当前项的总价

																		num
																				.change(function() {
																					total
																							.val(sale_price
																									.val()
																									* num
																											.val());
																					totalAll();
																				});

																		totalAll();
																	}, "json");
												}
											});
							return false;
						});
	</script>
	<script>
       function tijiao(){
    	   var num=$("#num").val();
    	   var unit=$("#unit").val();
    	   var oldnum=$("#oldnum").val();
    	   if(unit.length==0||unit==null){  
			     alert("您还未选任何商品！");
			     return false;
			} 
    	   if(num.length==0||num==null){  
			     alert("您还未选任何商品！");
			     return false;
			} 
  	 	  if(num<=0){  
			     alert("选择商品的数量最小为1！");
			     return false;
			}
  	 	  if(oldnum==0){
  	 		alert("当前商品库存为0！请及时进货！");
		     return false;
  	 	  }
  	 	 if(num>oldnum){
  		   alert("选择商品的数量必须小于等于当前库存数量！");
			     return false;
  	   }
    	   $("#from").submit();
       }
    </script>
</body>
</html>